<template>
  <div class="top_tool_bar_max">
    <a-popover v-for="(item, index) in btnList" :key="index" placement="bottom">
      <template #content>
        <span>{{ item.title }}</span>
      </template>
      <div @click="handleClick(item.name)" class="item-space">
        <a-button v-if="item.icon">
          <template #icon>
            <component :is="item.icon"></component>
          </template>
        </a-button>
        <a-button v-else> {{ item.text }} </a-button>
      </div>
    </a-popover>
  </div>
</template>

<script lang="ts">
import { DataUri } from '@antv/x6'
import { defineComponent, ref } from 'vue'
import { FlowGraph } from '@/common/FlowGraph'
import {
  DeleteOutlined,
  UndoOutlined,
  RedoOutlined,
  CopyOutlined,
  ScissorOutlined,
  BlockOutlined
} from '@ant-design/icons-vue'
interface IFBtnIcon {
  title: string
  name: string
  icon?: string
  text?: string
}
export default defineComponent({
  name: 'TopToolBar',
  components: {
    DeleteOutlined,
    UndoOutlined,
    RedoOutlined,
    CopyOutlined,
    ScissorOutlined,
    BlockOutlined
  },
  setup() {
    const btnList: IFBtnIcon[] = [
      { title: '清空画布', name: 'clear', icon: 'delete-outlined' },
      { title: '撤销 ctrl+z', name: 'undo', icon: 'undo-outlined' },
      { title: '重做 ctrl+d', name: 'redo', icon: 'redo-outlined' },
      { title: '复制 ctrl+c', name: 'copy', icon: 'copy-outlined' },
      { title: '剪切 ctrl+x', name: 'cut', icon: 'scissor-outlined' },
      { title: '粘贴 ctrl+v', name: 'paste', icon: 'block-outlined' },
      { title: '保存PNG', name: 'savePNG', text: 'png' },
      { title: '保存SVG', name: 'saveSVG', text: 'svg' },
      { title: '导出', name: 'toJSON', text: 'json' },
      { title: '打印 ctrl+p', name: 'print', text: '打印' }
    ]
    const graph = FlowGraph.graph
    const { history } = graph
    const canUndo = ref(history.canUndo())
    const canRedo = ref(history.canRedo())
    const copy = () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.copy(cells)
      }
      return false
    }
    const cut = () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.cut(cells)
      }
      return false
    }
    const paste = () => {
      if (!graph.isClipboardEmpty()) {
        const cells = graph.paste({ offset: 32 })
        graph.cleanSelection()
        graph.select(cells)
      }
      return false
    }
    const handleClick = (name: string) => {
      switch (name) {
        case 'undo':
          graph.history.undo()
          break
        case 'redo':
          graph.history.redo()
          break
        case 'clear':
          graph.clearCells()
          break
        case 'savePNG':
          graph.toPNG(
            (dataUri: string) => {
              // 下载
              DataUri.downloadDataUri(dataUri, 'chartx.png')
            },
            {
              backgroundColor: 'white',
              padding: {
                top: 20,
                right: 30,
                bottom: 40,
                left: 50
              },
              quality: 1
            }
          )
          break
        case 'saveSVG':
          graph.toSVG((dataUri: string) => {
            // 下载
            DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), 'chart.svg')
          })
          break
        case 'print':
          graph.printPreview()
          break
        case 'copy':
          copy()
          break
        case 'cut':
          cut()
          break
        case 'paste':
          paste()
          break
        case 'toJSON':
          console.log(graph.toJSON())
          // graph.fromJSON({cells:[graph.toJSON().cells[0],graph.toJSON().cells[1]]})
          break
        default:
          break
      }
    }
    history.on('change', () => {
      canUndo.value = history.canUndo()
      canRedo.value = history.canRedo()
    })
    // 快捷键绑定
    graph.bindKey('ctrl+z', () => {
      if (history.canUndo()) {
        history.undo()
      }
      return false
    })
    graph.bindKey('ctrl+shift+z', () => {
      if (history.canRedo()) {
        history.redo()
      }
      return false
    })
    graph.bindKey('ctrl+d', () => {
      graph.clearCells()
      return false
    })
    graph.bindKey('ctrl+s', () => {
      graph.toPNG((datauri: string) => {
        DataUri.downloadDataUri(datauri, 'chart.png')
      })
      return false
    })
    graph.bindKey('ctrl+p', () => {
      graph.printPreview()
      return false
    })
    graph.bindKey('ctrl+c', copy)
    graph.bindKey('ctrl+v', paste)
    graph.bindKey('ctrl+x', cut)
    return {
      canUndo,
      canRedo,
      copy,
      cut,
      paste,
      handleClick,
      btnList
    }
  }
})
</script>

<style lang="less" scoped>
.top_tool_bar_max {
  width: 100%;
  height: 40px;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
  border-bottom: 1px solid #d9d9d9;
}
.item-space {
  margin-left: 16px;
}
</style>
